<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- accept 接受的意思，文件格式  大类型/小类型-->
    <!-- 限制上传文件的 类型 ， content-type 类型的数据 -->
    <!-- image/* -->
    <!-- accept 它是 input 标签的属性 -->
    <input id="fileInput" type="file" accept="image/jpeg,image/png" />
    <!-- style="display: none" -->
    <!-- <button id="upload">上传头像</button> -->
    <img src="" id="avatar" />
    <script>
      // 先需要一个 input 接收 文件
      const fileInput = document.querySelector("#fileInput");
      //   const upload = document.querySelector("#upload");
      const img = document.querySelector("#avatar");
      // 文件被输入的事件，是 input.onchange
      // 如何获取 input type="file" 输入的文件
      // 1. 获取 input 节点
      // 2. input.onchange 监听文件输入事件 onchange 改变了的意思
      // 3. input.files 获取文件列表  file 文件 files 一堆文件

      //   upload.onclick = () => {
      //     fileInput.click();
      //   };
      // 1
      // change 改变，同一个文件，它不会改变
      fileInput.onchange = (e) => {
        // 数组解构
        const [file] = e.target.files;
        //2
        const formData = new FormData();
        // append 追加的意思
        // 新的 content-type
        formData.append("avatar", file);
        // 重置
        // const formData = new FormData(form)
        // formData.get()
        // 无法用formData.get 获取到文件，只能获取到文件名
        // fetch 只要一调用，就是发请求，xhr.send
        e.target.value = null;
        // fetch 把 xhr send 之前的配置，全部放在一起了（参数）
        fetch("https://autumnfish.cn/api/form/upload", {
          method: "POST",
          // multipart/form-data 不需要设置！交给 fetch 来设置
          //   headers: {
          //     "content-type": "multipart/form-data",
          //   },
          // 这里不是 json 格式的数据
          body: formData,
          // fetch 两段 then
        })
          //3
          .then((res) => res.json())
          .then((res) => {
            console.log(res);
            // data 就是 上传图片的 url
            const { data } = res;
            // 4
            img.setAttribute("src", data);
          });
        console.log(file);
      };

      // 1. 获取到 file
      // 2. 利用 fetch 通过 post 请求，尝试新的 content-type，上传到https://www.showdoc.com.cn/1834761734600444/8449568988197077
      // 3. 获取返回的结果，res.data
      // 4. `<img src=${res.data}/>`
    </script>
  </body>
</html>
